$(document).ready(function () {
    var renderFileList = function () {
        fileListDisplay.innerHTML = '';
        fileList.forEach(function (file, index) {
            var fileDisplayEl = document.createElement("p");
            fileDisplayEl.innerHTML = (index + 1) + ":" + file.name;
            fileListDisplay.appendChild(fileDisplayEl);
        })
    };

    var fileList = [];
    var fileCatcher = document.getElementById('form_example');
    var files = document.getElementById("files"), renderFileList;
    var fileListDisplay = document.getElementById('file-list-display'), sendFile;

    fileCatcher.addEventListener("submit", function (event) {
        event.preventDefault();
        //上传文件
        sendFile();
    });

    files.addEventListener("change", function (event) {
        for (var i = 0; i < files.files.length; {
            fileList.push(files.files[i]);
        }
        
        renderFileList();
    });

    sendFile = function () {
        var formData = new FormData();
        var request = new XMLHttpRequest();
        //循环添加到formData中
        fileList.forEach(function (file) {
            formData.append('files', file, file.name);
        })
        request.open("POST", "/test/upload.do");
        request.send(formData);
    }
})